<template>
	<view class="container">

		<div class="header_top">
			<div class="userIcon">
				<image src="/static/userImg/user.png" style="width:100%;height:100%"></image>
			</div>
			<div class="right">
				<text class="user_name">用户名</text>
				<div class="user_lever">
					<image src="/static/icons/vips.png" style="width:40rpx;height:40rpx;"></image>
					<div class="vip">已认证</div>
				</div>
			</div>
		</div>

	<div class="quanyi">
		<uni-card>
			<uni-row class="demo-uni-row">
				<uni-col :span="8">
					<view class="linghua quanyiItem">
						<text style="font-size: 40rpx;color: aqua;">1000</text>
						<text style="font-size: 25rpx;">零花钱</text>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="jifen quanyiItem">
						<text style="font-size: 40rpx;color: aqua;">1000</text>
						<text style="font-size: 25rpx;">积分</text>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="daoju quanyiItem">
						<text style="font-size: 40rpx;color: aqua;">1000</text>
						<text style="font-size: 25rpx;">道具</text>
					</view>
				</uni-col>
			</uni-row>
		</uni-card>
	</div>
	
	<div class="tools">
		<div class="toolsItem" v-for="item in tools " :key="item.id">
			<div class="left">
				<view class="iconfont " :class="item.icon" style="font-size: 40rpx;margin-right: 20rpx;"></view>
				<text style="font-size: 30rpx;">{{item.title}}</text>
			</div>
			<div class="right">
				<view class="iconfont icon-right-1-copy"></view>
			</div>
		</div>
	</div>

	</view>
</template>

<script setup>
	import {ref} from 'vue'
	
	let tools=ref([
		{
			id:1,
			icon:'icon-gerenziliao',
			title:'资料管理'
		},{
			id:2,
			icon:'icon-pifuzhuti-xianxing',
			title:'主题管理'
		},{
			id:3,
			icon:'icon-fenxiang',
			title:'一键分享'
		},{
			id:4,
			icon:'icon-xitong',
			title:'系统设置'
		}
	])
</script>

<style lang="scss">
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;

		.header_top {
			display: flex;
			justify-content: start;
			align-items: center;

			.userIcon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
				background-color: #fff;
				margin-right: 30rpx;
				margin-left: 30rpx;
			}

			.right {
				.user_name {
					font-size: 40rpx;
				}

				.user_lever {
					display: flex;
					justify-content: start;
					align-items: center;
					border-radius: 10rpx;
					background-color: #ffeb3bb8;

					.vip {
						padding: 2px 5px;
						font-size: 30rpx;
						color: #e49a2b;

					}
				}
			}
		}
		
		.quanyiItem {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		.tools {
			margin-top: 50rpx;
			.toolsItem {
				padding: 40rpx 20rpx;
				display: flex;
				justify-content: space-between;
				.left {
					display: flex;
					justify-content: start;
					align-items: center;
				}
			}
		}
	}
</style>